<?php
/**
 * Created by PhpStorm.
 * User: tengjs
 * Date: 2020/11/20
 * Time: 8:20
 */

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class Froala extends Field
{
    // 定义视图
    protected $view = 'admin.form.froala';

    protected $contentId = 0;

    protected $contentType = 0; // 1-表admin_employees，2-表admin_contents，3-表admin_recruitments

    // 插件具体说明参见：https://froala.com/wysiwyg-editor/docs/plugins/
    protected static $css = [
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css',
        '/vendor/froala_editor/css/froala_editor.min.css',
        '/vendor/froala_editor/css/froala_style.min.css',
        '/vendor/froala_editor/css/plugins/code_view.min.css',
        '/vendor/froala_editor/css/plugins/draggable.min.css',
        '/vendor/froala_editor/css/plugins/colors.min.css',
        '/vendor/froala_editor/css/plugins/emoticons.min.css',
//        '/vendor/froala_editor/css/plugins/image_manager.min.css',
        '/vendor/froala_editor/css/plugins/image.min.css',
        '/vendor/froala_editor/css/plugins/line_breaker.min.css',
        '/vendor/froala_editor/css/plugins/table.min.css',
        '/vendor/froala_editor/css/plugins/char_counter.min.css',
        '/vendor/froala_editor/css/plugins/video.min.css',
        '/vendor/froala_editor/css/plugins/fullscreen.min.css',
        '/vendor/froala_editor/css/plugins/file.min.css',
//        '/vendor/froala_editor/css/plugins/files_manager.min.css',
        '/vendor/froala_editor/css/plugins/quick_insert.min.css',
        '/vendor/froala_editor/css/plugins/help.min.css',
        '/vendor/froala_editor/css/third_party/spell_checker.min.css',
        '/vendor/froala_editor/css/third_party/embedly.min.css',
//        '/vendor/froala_editor/css/third_party/image_tui.min.css',
        '/vendor/froala_editor/css/plugins/special_characters.min.css',
        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css'

    ];

    protected static $js = [
        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js',
        '/vendor/froala_editor/js/froala_editor.min.js',
        '/vendor/froala_editor/js/languages/zh_cn.js',
        '/vendor/froala_editor/js/plugins/align.min.js',
        '/vendor/froala_editor/js/plugins/char_counter.min.js',
        '/vendor/froala_editor/js/plugins/code_beautifier.min.js',
        '/vendor/froala_editor/js/plugins/code_view.min.js',
        '/vendor/froala_editor/js/plugins/colors.min.js',
        '/vendor/froala_editor/js/plugins/draggable.min.js',
        '/vendor/froala_editor/js/plugins/emoticons.min.js',
        '/vendor/froala_editor/js/plugins/entities.min.js',
        '/vendor/froala_editor/js/plugins/file.min.js',
//        '/vendor/froala_editor/js/plugins/files_manager.min.js',
        '/vendor/froala_editor/js/plugins/font_size.min.js',
        '/vendor/froala_editor/js/plugins/font_family.min.js',
        '/vendor/froala_editor/js/plugins/fullscreen.min.js',
        '/vendor/froala_editor/js/plugins/image.min.js',
//        '/vendor/froala_editor/js/plugins/image_manager.min.js', // 不要这个图片管理，这个是在官方服务器上的图片
        '/vendor/froala_editor/js/plugins/line_breaker.min.js',
        '/vendor/froala_editor/js/plugins/line_height.min.js',
        '/vendor/froala_editor/js/plugins/link.min.js',
        '/vendor/froala_editor/js/plugins/lists.min.js',
        '/vendor/froala_editor/js/plugins/paragraph_format.min.js',
        '/vendor/froala_editor/js/plugins/paragraph_style.min.js',
        '/vendor/froala_editor/js/plugins/quick_insert.min.js',
        '/vendor/froala_editor/js/plugins/quote.min.js',
        '/vendor/froala_editor/js/plugins/table.min.js',
        '/vendor/froala_editor/js/plugins/save.min.js',
        '/vendor/froala_editor/js/plugins/url.min.js',
        '/vendor/froala_editor/js/plugins/video.min.js',
        '/vendor/froala_editor/js/plugins/help.min.js',
        '/vendor/froala_editor/js/plugins/print.min.js',
        '/vendor/froala_editor/js/plugins/inline_class.min.js',
        '/vendor/froala_editor/js/plugins/inline_style.min.js',
        '/vendor/froala_editor/js/third_party/spell_checker.min.js',
        '/vendor/froala_editor/js/third_party/embedly.min.js',
//        '/vendor/froala_editor/js/third_party/image_tui.min.js',
        '/vendor/froala_editor/js/plugins/special_characters.min.js',
        '/vendor/froala_editor/js/plugins/word_paste.min.js',
    ];

    public function render()
    {
        // 文档地址：https://froala.com/wysiwyg-editor/docs/options/
        $defaultFont  = "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji";
        $this->script = <<<EOT
        (function () {
          new FroalaEditor("#{$this->id}", {
            // 激活码ACTIVATION_KEY 
//            key:'fIE3A-9C1G2D2C4B4A3tjhxF4I-7B-22A-16dtqF-10B1prbB3ztgC3E3G3A2B7A4E3F4D2D1==',
            // 全屏自动增长
            fullPage:true,
            language: 'zh_cn',
            fontSize: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '26', '28', '30', '36', '60'],
            fontSizeDefaultSelection: '16',
            fontFamily: {
                "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'":"默认",
                "'Microsoft YaHei'":"微软雅黑",
                "宋体,SimSun":"宋体",
                "'Times New Roman',Times,serif": "Times New Roman",
//                "Arial,Helvetica,sans-serif": "Arial",
//                "Georgia,serif": "Georgia",
//                "Impact,Charcoal,sans-serif": "Impact",
//                "Tahoma,Geneva,sans-serif": "Tahoma",
//                "Verdana,Geneva,sans-serif": "Verdana"
            },
            fontFamilyDefaultSelection: "{$defaultFont}",
            iframeDefaultStyle:"html{margin:0px;height:auto;}body{font-family:{$defaultFont};height:auto;padding:20px;background:transparent;color:#000000;position:relative;z-index: 2;-webkit-user-select:auto;margin:0px;overflow:hidden;min-height:20px;}body:after{content:\"\";display:block;clear:both;}body::-moz-selection{background:#b5d6fd;color:#000;}body::selection{background:#b5d6fd;color:#000;}",
            heightMin: 300,
//            heightMax: 1000,

            // Remove the Powered By Froala message.
            attribution: true,
            
//            toolbarInline: true,

            // 字体设置
            // 从word中粘贴时允许保留的样式
            wordAllowedStyleProps:[
                'text-align', 'vertical-align', 'text-decoration', 'font-weight'
            ],
            // 从word粘贴时需要移除的属性
            wordDeniedAttrs: [
                'style'
            ],
            wordPasteModal: true,
            pasteAllowedStyleProps: [
                'text-align', 'vertical-align', 'text-decoration', 'font-weight'
            ],
            pasteDeniedAttrs: [
                'class', 'id', 'style',
            ],
            // 将内容粘贴到RTF编辑器中时删除文本格式，但保留内容的结构。【这个会导致图片和文本粘贴时，图片粘贴不进去】
//            pastePlain: true,

            // 默认情况下，图像调整大小使用PX。在编辑器中调整图像大小时，启用此选项将使用％代替。
            imageResizeWithPercent: true,
            
            // 图片上传
            imageDefaultAlign: 'left',
            
            //imageDefaultDisplay: 'inline',
            
            // Set the image upload parameter.
            imageUploadParam: 'froala_image',
        
            // Set the image upload URL.
            imageUploadURL: '/admin/upload_images',
        
            // Additional upload params.
            imageUploadParams: {content_id: "{$this->contentId}", content_type: "{$this->contentType}"},
        
            // Set request type.
            imageUploadMethod: 'POST',
            
            // Add new line after inserting an image when enabled.
            imageAddNewLine: false,
        
            // Set max image size to 5MB.
            imageMaxSize: 40 * 1024 * 1024,
        
            // Allow to upload PNG and JPG.
            imageAllowedTypes: ['png', 'jpg', 'jpeg', 'gif', 'bmp'],
        
            // 视频上传
            // Set the video upload parameter.
            videoUploadParam: 'froala_video',
        
            // Set the video upload URL.
            videoUploadURL: '/admin/upload_videos',
        
            // Additional upload params.
            videoUploadParams: {content_id: "{$this->contentId}", content_type: "{$this->contentType}"},
        
            // Set request type.
            videoUploadMethod: 'POST',
        
            // Set max video size to 50MB.
            videoMaxSize: 1000 * 1024 * 1024,
            
            videoMove: true,
            videoResize: true,
//            videoResponsive: true,
        
            // Allow to upload MP4, WEBM and OGG
            videoAllowedTypes: ['flv', 'swf', 'mkv', 'avi', 'rm', 'rmvb', 'mpeg', 'mpg',
            'ogg', 'ogv', 'mov', 'wmv', 'mp4', 'webm', 'mp3', 'wav', 'mid'],
        
            // 文件上传
            // Set the file upload parameter.
            fileUploadParam: 'froala_file',
        
            // Set the file upload URL.
            fileUploadURL: '/admin/upload_files',
        
            // Additional upload params.
            fileUploadParams: {content_id: "{$this->contentId}", content_type: "{$this->contentType}"},
        
            // Set request type.
            fileUploadMethod: 'POST',
        
            // Set max file size to 20MB.
            fileMaxSize: 1000 * 1024 * 1024,
        
            // Allow to upload any file. 注意文件类型是application/msword、application/pdf这种格式
            fileAllowedTypes: ['*'],
            
            events: {
              'image.beforeUpload': function (images) {
                // Return false if you want to stop the image upload.
              },
              'image.uploaded': function (response) {
                // Image was uploaded to the server.
              },
              'image.inserted': function (imgObj, response) {
                // Image was inserted in the editor.
              },
              'image.replaced': function (imgObj, response) {
                // Image was replaced in the editor.
              },
              'image.error': function (error, response) {
                // Bad link.
                if (error.code == 1) {}
        
                // No link in upload response.
                else if (error.code == 2) {}
        
                // Error during image upload.
                else if (error.code == 3) {}
        
                // Parsing response failed.
                else if (error.code == 4) {}
        
                // Image too text-large.
                else if (error.code == 5) {}
        
                // Invalid image type.
                else if (error.code == 6) {}
        
                // Image can be uploaded only to same domain in IE 8 and IE 9.
                else if (error.code == 7) {}
        
                // Response contains the original server response to the request if available.
              },
              
              'video.beforeUpload': function (videos) {
                // Return false if you want to stop the video upload.
              },
              'video.uploaded': function (response) {
                // Video was uploaded to the server.
              },
              'video.inserted': function (imgObj, response) {
                // Video was inserted in the editor.
              },
              'video.replaced': function (imgObj, response) {
                // Video was replaced in the editor.
              },
              'video.error': function (error, response) {
                // Bad link.
                if (error.code == 1) {}
        
                // No link in upload response.
                else if (error.code == 2) {}
        
                // Error during video upload.
                else if (error.code == 3) {}
        
                // Parsing response failed.
                else if (error.code == 4) {}
        
                // Video too text-large.
                else if (error.code == 5) {}
        
                // Invalid video type.
                else if (error.code == 6) {}
        
                // Video can be uploaded only to same domain in IE 8 and IE 9.
                else if (error.code == 7) {}
        
                // Response contains the original server response to the request if available.
              },
            
              'file.beforeUpload': function (files) {
                // Return false if you want to stop the file upload.
                console.log(files);
              },
              'file.uploaded': function (response) {
                // File was uploaded to the server.
                console.log(response);
              },
              'file.inserted': function (fileObj, response) {
                // File was inserted in the editor.
                console.log(fileObj);
                console.log(response);
              },
              'file.error': function (error, response) {
                console.log(error);
                console.log(response);
                // Bad link.
                if (error.code == 1) {}
        
                // No link in upload response.
                else if (error.code == 2) {}
        
                // Error during file upload.
                else if (error.code == 3) {}
        
                // Parsing response failed.
                else if (error.code == 4) {}
        
                // File too text-large.
                else if (error.code == 5) {}
        
                // Invalid file type.
                else if (error.code == 6) {}
        
                // File can be uploaded only to same domain in IE 8 and IE 9.
                else if (error.code == 7) {}
        
                // Response contains the original server response to the request if available.
              },
              
              'contentChanged': function () {
                console.log('content changed')
              }
            },
            toolbarButtons: {
              'moreText': {
                'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
              },
              'moreParagraph': {
                'buttons': ['alignLeft', 'alignCenter', 'alignRight', 'formatOLSimple', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
              },
              'moreRich': {
                'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']
              },
              'moreMisc': {
                'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
                'align': 'right',
                'buttonsVisible': 2
              }
            }
          })
        })();
EOT;
        return parent::render();
    }

    /**
     * @return int
     */
    public function getContentId()
    {
        return $this->contentId;
    }

    /**
     * @param int $contentId
     *
     * @return Froala
     */
    public function setContentId(int $contentId)
    {
        $this->contentId = $contentId;

        return $this;
    }

    /**
     * @return int
     */
    public function getContentType()
    {
        return $this->contentType;
    }

    /**
     * @param int $contentType
     *
     * @return Froala
     */
    public function setContentType(int $contentType)
    {
        $this->contentType = $contentType;

        return $this;
    }
}


